<template>
  <div>
    <van-nav-bar title="我的关注" left-text="返回" left-arrow @click-left="onClickLeft" />

    <div class="list">
      <div class="item" v-for="item in followsList" :key="item.id">
        <img class="avatar" v-if="item.head_img" :src="$axios.defaults.baseURL + item.head_img" alt="" />
        <img class="avatar" v-else src="../../assets/logo.png" alt="" />
        <div class="info">
          <div class="name">{{ item.nickname }}</div>
          <div class="date">{{ item.create_date.split('T')[0] }}</div>
        </div>
        <div class="btnUnfollow" @click="unfollow(item.id)">取消关注</div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
export default {
  data() {
    return {
      followsList: []
    }
  },
  created() {
    this.loadPage()
  },
  methods: {
    loadPage() {
      this.$axios({
        url: '/user_follows'
      }).then(res => {
        console.log(res.data)

        this.followsList = res.data.data
      })
    },
    unfollow(id) {
      this.$axios({
        url: '/user_unfollow/' + id
      }).then(res => {
        this.loadPage()
      })
    },
    onClickLeft() {
      this.$router.back()
      Toast('返回')
    }
  }
}
</script>

<style lang="less" scoped>
.item {
  display: flex;
  padding: 5.556vw 6.667vw;
  align-items: center;
  border-bottom: 1px solid #e4e4e4;
  .avatar {
    width: 11.1111vw;
    height: 11.1111vw;
    object-fit: cover;
    border-radius: 50%;
  }
  .info {
    flex: 1;
    padding: 0 2.778vw;
    .name {
      font-size: 4.4444vw;
    }
    .date {
      font-size: 3.3333vw;
      color: #bbb;
      padding-top: 1.111vw;
    }
  }
  .btnUnfollow {
    font-size: 3.3333vw;
    background: #e4e4e4;
    padding: 0 2.778vw;
    height: 8.3333vw;
    line-height: 8.3333vw;
    border-radius: 4.1667vw;
  }
}
</style>
